import type { Metadata } from 'next';
import Link from 'next/link';
import { ScopeHeader } from '@/components/detail/ScopeHeader';
import { ScopePressureChart } from '@/components/detail/ScopeCharts';
import { TargetsTable } from '@/components/detail/Tables';
import { IncidentsSection } from '@/components/incidents/IncidentsSection';
import { ProbeTargetMatrix } from '@/components/service/ProbeTargetMatrix';
import { VendorIndicator } from '@/components/service/VendorIndicator';
import { Section, Stat } from '@/components/ui/primitives';
import { apiGet, apiTry } from '@/lib/api';
import { fmt, fmtInt, fmtMs, fmtPct } from '@/lib/format';
import { Time } from '@/lib/time';
import type { ServiceDetail } from '@/lib/types';

export const dynamic = 'force-dynamic';

type Params = Promise<{ slug: string }>;

export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
  const { slug } = await params;
  const s = await apiTry<ServiceDetail>(`/api/v1/service/${encodeURIComponent(slug)}`);
  if (!s) return { title: 'Service' };
  return { title: `${s.name} — observed pressure ${fmt(s.pressure)}, availability ${fmtPct(s.observed.availability_24h, 2)}`, description: s.discrepancy ?? `Independent observation of ${s.name} from our probe network versus the vendor status page.`, alternates: { canonical: `/service/${s.slug}` } };
}

export default async function ServicePage({ params }: { params: Params }) {
  const { slug } = await params;
  const s = await apiGet<ServiceDetail>(`/api/v1/service/${encodeURIComponent(slug)}`);
  const ttfbShift = s.observed.ttfb_ms_median_1h - s.observed.ttfb_ms_baseline;
  return (
    <div className="pb-8">
      <ScopeHeader kicker={`Service · ${s.category}`} title={s.name} subtitle={<>{fmtInt(s.targets.length)} endpoints measured from every probe · observed availability 24 h {fmtPct(s.observed.availability_24h, 2)}</>} pressure={s.pressure} level={s.level} />

      {s.discrepancy && (
        <div role="note" className="mb-4 border-l-2 border-warn bg-[rgba(233,196,106,0.06)] px-4 py-3 text-[13px]">
          <p className="label mb-1 text-warn">Discrepancy</p>
          <p className="text-ink">{s.discrepancy}</p>
        </div>
      )}

      <div className="grid grid-cols-[minmax(0,1fr)] gap-x-10 md:grid-cols-2">
        <Section label="Observed by InternetPressure" className="min-w-0">
          <div className="grid grid-cols-2 gap-x-4 gap-y-4 sm:grid-cols-3">
            <Stat label="availability 1h" value={<span style={{ color: s.observed.availability_1h < 0.99 ? 'var(--p-high)' : undefined }}>{fmtPct(s.observed.availability_1h, 2)}</span>} />
            <Stat label="availability 24h" value={fmtPct(s.observed.availability_24h, 2)} />
            <Stat label="failures 1h" value={<span style={{ color: s.observed.failures_1h > 5 ? 'var(--p-elevated)' : undefined }}>{fmtInt(s.observed.failures_1h)}</span>} />
            <Stat label="TTFB p50 1h" value={fmtMs(s.observed.ttfb_ms_median_1h)} sub={`baseline ${fmtMs(s.observed.ttfb_ms_baseline)} · ${ttfbShift >= 0 ? '+' : ''}${fmt(ttfbShift, 0)} ms`} />
            <Stat label="TLS p50 1h" value={fmtMs(s.observed.tls_ms_median_1h, 1)} />
            <Stat label="pressure" value={<span style={{ color: `var(--p-${s.level})` }}>{fmt(s.pressure)}</span>} />
          </div>
        </Section>
        <Section label="Vendor status page" className="min-w-0">
          {s.vendor_status ? (
            <div className="space-y-2 text-[13px]">
              <div className="flex items-center justify-between">
                <VendorIndicator v={s.vendor_status} />
                <span className="num text-[11px] text-ink-3">
                  checked <Time ts={s.vendor_status.checked_at} style="time" />
                </span>
              </div>
              <p className="text-ink-2">
                {s.vendor_status.incidents ? `${s.vendor_status.incidents} incident${s.vendor_status.incidents > 1 ? 's' : ''} declared` : 'No incident declared'} · source{' '}
                {s.vendor_status.url ? (
                  <a href={s.vendor_status.url} rel="noopener nofollow" target="_blank" className="text-accent hover:underline">
                    {s.vendor_status.source}
                  </a>
                ) : (
                  s.vendor_status.source
                )}
              </p>
              {s.vendor_status.titles?.length ? (
                <ul className="list-disc space-y-1 pl-4 text-ink">
                  {s.vendor_status.titles.map((t, i) => (
                    <li key={i}>{t}</li>
                  ))}
                </ul>
              ) : null}
            </div>
          ) : (
            <p className="text-[13px] text-ink-3">No status-page connector for this provider — only our independent observation is shown.</p>
          )}
        </Section>
      </div>

      <Section label="Affected regions" right={<span>observed from our probes</span>}>
        {s.affected_regions.length ? (
          <ul className="divide-y divide-line">
            {s.affected_regions.map((r) => (
              <li key={r.id} className="flex flex-wrap items-baseline gap-x-4 py-2 text-[13px]">
                <Link href={`/internet/${r.id}`} className="w-48 text-ink hover:text-accent">
                  {r.name}
                </Link>
                <span className="text-ink-2">{r.observation}</span>
              </li>
            ))}
          </ul>
        ) : (
          <p className="py-3 text-[12.5px] text-ink-3">No region shows an anomaly toward this service right now.</p>
        )}
      </Section>

      <Section label="Probe × target matrix" right={<span>cell = robust z of TTFB vs baseline · red = failing</span>}>
        <ProbeTargetMatrix matrix={s.matrix} targets={s.targets} />
      </Section>

      <Section label="24 h pressure">
        <ScopePressureChart series={s.history_24h} height={220} />
      </Section>

      <Section label="Incidents">
        <IncidentsSection incidents={s.incidents} />
      </Section>

      <Section label="Endpoints">
        <TargetsTable targets={s.targets} />
      </Section>
    </div>
  );
}